/*
 * @Date: 2023-10-19 14:19:57
 * @LastEditors: lyx
 * @LastEditTime: 2023-11-15 14:39:29
 * @FilePath: \sup-mini-app\src\pages\login\login.tsx
 * @Description:
 */
import React from "react";
import { AtButton, AtToast, AtAvatar, AtInput } from "taro-ui";
import useLogin from "./hooks/useLogin";
import { View } from "@tarojs/components";
import "./index.scss";
import UserModal from "@/components/UserModal";

function Login() {
  const loginInst = useLogin();
  return (
    <>
      <AtToast isOpened={loginInst.fail} status={loginInst.dialogType}>{loginInst.failText}</AtToast>
      {/* <Image
        style={{ width: "100px", height: "100px" }}
        src={userInfo.avatarUrl}
      /> */}
      <View className="input-phone-wrapper">
        <AtInput
          clear
          name="inputPhone"
          type="phone"
          title="手机号"
          placeholder="请输入手机号码"
          value={loginInst.inputPhone}
          className="input-phone"
          onChange={(e) => {
            console.log("inputPhone e", e);
            loginInst.setInputPhone(e);
          }}
        >
          <AtButton
            type="primary"
            size="small"
            onClick={() => {
              loginInst.getObpUserList();
            }}
          >
            获取用户
          </AtButton>
        </AtInput>
      </View>

      <AtAvatar circle image={loginInst.userInfo.avatarUrl}></AtAvatar>
      <p>昵称：{loginInst.userInfo.nickName}</p>
      <p>手机号：{loginInst.phone}</p>
      <AtButton
        type="primary"
        style={loginInst.style}
        openType="getPhoneNumber"
        onGetPhoneNumber={loginInst.getPhonenNmber}
      >
        一键登录
      </AtButton>
      <AtButton
        type="primary"
        style={loginInst.style}
        onClick={loginInst.getUserProfile}
      >
        一键获取信息
      </AtButton>

      <UserModal
        open={loginInst.modalOpen}
        info={loginInst.obpUser}
        onClose={() => {
          loginInst.setModalOpen(false);
        }}
        onOk={() => {
          loginInst.bindObpUser();
        }}
      />
    </>
  );
}

export default Login;
